<template>
<view class="page">
	<mallHeader :title="title"></mallHeader>
	<view class="form-box pad">
		<view class="form-item">
			<view class="label">
				收货人
			</view>
			<input type="text" class="form-input" v-model="form.user" placeholder="姓名">
		</view>
		<view class="form-item">
			<view class="label">
				手机号码
			</view>
			<input type="text" class="form-input" v-model="form.phone" placeholder="手机号">
		</view>
		<view class="form-item">
			<view class="label">
				选择地区
			</view>
			<pickerAddress  @change="changeAddress" :class="form.region === '' ? 'form-input empty' : 'form-input'" >
				{{form.region||'省、市、区'}}
			</pickerAddress>
		</view>
		<view class="form-item">
			<view class="label">
				详细地址
			</view>
			<input type="text" class="form-input" v-model="form.address" placeholder="小区楼栋/乡村名称">
		</view>
		
		<view class="form-btn" @click="addressBtn">
			确定
		</view>
	</view>
	
	
</view>
</template>

<script>
	import pickerAddress from '@/components/pickerAddress/pickerAddress'
	import mallHeader from '@/components/mallHeader/mallHeader'
	import utils from '@/utils/util.js'

	import { isLogin, addAddress, addressDetails, addressEdit } from '@/api/substitution.js'
	
	export default {
		components:{
			mallHeader,
			pickerAddress
		},
		data(){
			return {
				title:"新增收货地址",
				address_detail:'',
				form:{
					user:'',
					phone:'',
					address:'',
					region:'',
					regionArr:[],
				},
				address_id: '',
				edit: null
			}
		},
		onLoad(e) {
			isLogin()
			
			this.edit = e.edit
			
			if (e.id) {
				this.title = '修改收货地址'
				this.address_id = e.id;
				addressDetails({
					address_id: e.id
				}).then(res => {
					this.form.user = res.data.detail.name
					this.form.phone = res.data.detail.phone
					this.form.address = res.data.detail.detail
					this.form.regionArr = res.data.region
					this.form.region = res.data.region.join(' ')
				})
			} else {
					this.title = '新增收货地址'
			}
		},
		methods: {
			addressBtn(){
				let {user,phone,address,region,regionArr} = this.form;
				
				if(!user){
					this.$api.msg("请输入姓名！")
				}else if(!phone){
					this.$api.msg("请输入联系电话！")
				}else if(!utils.regPhone(phone)){
					this.$api.msg("请输入正确的联系电话！")
				}else if(!region){
					this.$api.msg("请选择地址！");
				}else if(!address){
					this.$api.msg("请填写地址");
				}else{
					let data = {
						name: user,
						phone: phone,
						detail:address,
						region:regionArr.join(','),
					};
					uni.showLoading({
						mask: true
					})
					console.log(this.edit)
					if (parseInt(this.edit) === 1) {
						data.address_id = this.address_id
						addressEdit(data).then(res=>{
							uni.showToast({
								icon: 'success',
								title: res.msg
							})
							uni.navigateBack()
						})
					} else {
						addAddress(data).then(res=>{
							uni.showToast({
								icon: 'success',
								title: res.msg
							})
							uni.navigateBack()
						})
					}
				}
			},
			changeAddress(data){
				console.log(data)
				this.form.regionArr = data.data;
				this.form.region = data.data.join(' ');
			},
		},
		created(){
			
		},
		mounted(){
			
		}
	}
</script>

<style scoped lang="scss">
	@import '/common/css/shop.css';
	.form-box{
		padding-top: 50rpx;
		.form-item{
			margin-top: 30rpx;
			display: flex;
			height: 80rpx;
			align-items: center;
			border-radius: 12rpx;
			background-color: #FFFFFF;
			.label{
				width: 180rpx;
				box-sizing: border-box;
				padding: 0 15rpx 0 25rpx;
				font-size: 26rpx;
			}
			.form-input{
				flex:1;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 26rpx;
				
				&.empty {
					color: grey;
				}
			}
		}
		.form-btn{
			@include  flexCenter();
			@include  bgGradient();
			@include  btnStyle(690,80);
			margin:100rpx auto 0;
			
		}
	}
</style>
